<template>
  <div class="my_cart">
    <img :src="itemObj.img" alt="" />
    <p>{{itemObj.desc}}</p>
    <section>
      <span style="color:red">{{itemObj.name}}</span>
      <button @click="$store.commit('addBook',itemObj)">+</button>
    </section>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    itemObj: Object
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
.my_cart {
  width: 49%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  img{
      width: 100%;
  }
  p{
      font-size: 12px;
  }
  section{
     display: flex;
     justify-content: space-between;
  }
  button{
    border: none;
    padding: 5px 8px;
    border-radius: 50%;
    // font-size: 20px;
    background: red;
    color: #fff;
  }
}
</style>